<template>
  <div class="wrapper">
    <el-card class="card">
      <h1 class="title">餐厅管理系统 - 登录</h1>
      <el-form
          label-position="left"
          label-width="100px"
          ref="ruleFormRef"
          :model="userData"
          :rules="rules"
          class="form"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userData.username"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userData.password"/>
        </el-form-item>

        <div class="btn-wrapper">
          <el-button class="btn" style="margin-left: 100px" type="primary" @click="submitForm(ruleFormRef)">登录
          </el-button>
          <el-button class="btn" type="primary" @click="register(ruleFormRef)">注册</el-button>
        </div>
      </el-form>
<!--      <span-->
<!--          style="color: lightseagreen; cursor: pointer;"-->
<!--          @click="router.push('/home/welcome')"-->
<!--      >点我直接跳转到主页</span>-->
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {FormInstance, FormRules} from "element-plus";
import router from "../router";
import {loginApi, registerApi} from "../api";
import {ResponseHandleTemplate} from "../api/response";
import say from "../util/say";

const loginResponseHandler = new ResponseHandleTemplate<string>(json => {
  if (json.code !== 200) {
    say.sayError(json.message)
  } else {
    say.saySuccess('登录成功')
    if (json.data) {
      localStorage.setItem('token', json.data)
    }
    router.push('/home/welcome')
  }
})

const registerResponseHandler = new ResponseHandleTemplate<any>(json => {
  if (json.code !== 200) {
    say.sayError(json.message)
  } else {
    say.saySuccess('注册成功')
    userData.username = ''
    userData.password = ''
  }
})

const userData = reactive({
  username: '',
  password: '',
})
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur'},
  ],
})
const submitForm = async (formElement: FormInstance | undefined) => {
  if (!formElement) return
  await formElement.validate(async (valid) => {
    if (valid) {
      const {username, password} = userData
      loginResponseHandler.handlePromise(loginApi(username, password))
    } else {
      say.sayError('登录失败')
    }
  })
}
const register = async (formElement: FormInstance | undefined) => {
  if (!formElement) return
  await formElement.validate((valid) => {
    if (valid) {
      const {username, password} = userData
      registerResponseHandler.handlePromise(registerApi(username,password));
    }})}
</script>

<style scoped lang="less">
.wrapper {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  // 包裹表单的卡片
  .card {
    max-width: 500px;
    width: 70%;
    // 标题
    .title {
      background-image: url("../assets/Mystia.png");
      background-repeat: no-repeat;
      background-size: 55px;
      height: 60px;
      background-position: 50px 0;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    // 表单
    .form {
      width: 80%;
      margin: 0 auto;
      // 表单按钮
      .btn-wrapper {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;

        .btn {
          width: 25%;
        }
      }
    }
  }
}
</style>